<template>
  <div class="bg-white common-card">
    <dc-cell class="main-title" title="财务分析" value="详情" sVal="true" :to="'/financial'" isLink></dc-cell>
    <dc-row class="pt40 pb40 mid1px" type="flex" justify="center">
      <dc-col class="card-data" span="10">
        <span class="num">{{countMsg.totalIncome}}</span>
        <span class="label">月总收入</span>
      </dc-col>
      <dc-col class="card-data" span="10">
        <span class="num">{{countMsg.totalExpend}}</span>
        <span class="label">月总支出</span>
      </dc-col>
    </dc-row>
    <dc-row class="pt40 pb40" type="flex" justify="center">
      <dc-col class="card-data" span="10">
        <span class="num">{{countMsg.netMargin}}</span>
        <span class="label">月净利润</span>
      </dc-col>
      <dc-col class="card-data" span="10">
        <span class="num">{{countMsg.profitMargin}}%</span>
        <span class="label">月净利率</span>
      </dc-col>
    </dc-row>
  </div>
</template>
<script>
  import {col, row} from '@/components/Flex';
  import cell from '@/components/cell';
  import api from '@/common/api/financial';
  export default {
    data () {
      return {
        data: {timeFlag: -1},
        countMsg: {
          totalIncome: 0,
          totalExpend: 0,
          netMargin: 0,
          profitMargin: 0
        }
      };
    },
    components: {
      'dc-col': col,
      'dc-row': row,
      'dc-cell': cell
    },
    methods: {
      _sysCount (data) {
        api.getFinCount(data).then(res => {
          if (res) {
            this.countMsg = res;
          }
        });
      }
    },
    activated () {
      this._sysCount({timeFlag: -1});
    },
    created () {
      this._sysCount({timeFlag: -1});
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../../assets/css/variable";

</style>
